<!--  -->
<template>
  <div>
    <p>考核要求：按时上下班并做好值班工作（10分） 考核方式:学务办记录，迟到、早退1次扣2分，上班、值班时间不在岗1次此项目不得分。</p>
    <div style="display: flex; align-items: center;">
      <div>辅导员自评分：{{ form.kpiFillingAMgtList[0].dutyWorkScoring || '没有填写' }}</div>
      <div style="display: flex; align-items: center;margin-left: 50px;" v-if="isShow">
        <div style="min-width: 70px;color: red;">调整分数：</div>
        <el-input-number v-model="form.kpiFillingAMgtList[0].dutyWorkScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;"></el-input-number>
        <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingAMgtList[0].dutyWorkScoring" clearable size="mini">
        </el-input> -->
      </div>
    </div>
    <p>考核要求：按要求参加辅导员各项会议、培训（10分） ―考核方式:学务办、学工处记录，无故缺勤1次扣2分，连续不参加会议2次扣5分。</p>
    <div style="display: flex; align-items: center;">
      <div>
        辅导员自评分：{{ form.kpiFillingAMgtList[0].conferenceScoring || '没有填写' }}
      </div>
      <div style="display: flex; align-items: center;margin-left: 50px;" v-if="isShow">
        <div style="min-width: 70px;color: red;">调整分数：</div>
        <el-input-number v-model="form.kpiFillingAMgtList[0].conferenceScoring" :min="0" :max="10" label="调整分数" size="mini" style="width: 100%;"></el-input-number>
        <!-- <el-input placeholder="请输入自评分" v-model="form.kpiFillingAMgtList[0].conferenceScoring" clearable size="mini">
        </el-input> -->
      </div>
    </div>
    <div style="margin-top: 20px;">
      <el-table :data="form.kpiFillingAMgtList[0].conferenceMeetingMaterialsList" border>
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column label="主题" align="center" prop="subject" />
        <el-table-column label="组织单位" align="center" prop="organizationalUnit" />
        <el-table-column label="会议培训开始时间" align="center" prop="startTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地点" align="center" prop="place" />
      </el-table>
    </div>
    <div class="button" v-if="form.kpiFillingAMgtList[0].hasOwnProperty('id') && !(form.auditStatus === 1 && form.roleAudit === 4)">
      <el-button type="primary" v-show="isShow" @click="save">保 存</el-button>
      <el-button type="warning" @click="switchIsShow" v-if="!roleGroup.includes('辅导员') && audit">修 改</el-button>
    </div>
  </div>
</template>

<script>
import { getKpiFillingAMgt, updateKpiFillingAMgt } from "@/api/teacher/kpiFillingAMgt";
export default {
  props: {
    form: {
      type: Object,
      default: []
    },
    roleGroup: {
      type: String,
      default: ""
    },
    audit: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    "form.kpiFillingAMgtList": {
      immediate: true,
      handler() {
        if (this.form.kpiFillingAMgtList.length === 0) {
          this.form.kpiFillingAMgtList[0] = {
            conferenceScoring: 0,
            dutyWorkScoring: 0,
            conferenceMeetingMaterialsList: []
          }
        }
      }
    }
  },
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    switchIsShow() {
      this.isShow = !this.isShow
    },
    save() {
      this.$modal.loading('正在努力加载中，请稍等。。。')
      updateKpiFillingAMgt(this.form.kpiFillingAMgtList[0]).then(response => {
        // this.$modal.msgSuccess("修改成功");
        getKpiFillingAMgt(this.form.kpiFillingAMgtList[0].id).then(response => {
          this.form.kpiFillingAMgtList[0].dutyWorkScoring = response.data.dutyWorkScoring,
          this.form.kpiFillingAMgtList[0].conferenceScoring = response.data.conferenceScoring,
          this.$modal.msgSuccess("修改成功");
          this.switchIsShow()
          this.$modal.closeLoading()
        });
      });
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  // 离开当前页面时执行代码
  destroyed() {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.button {
  margin-top: 20px;
  position: sticky;
  bottom: 0;
  background-color: white;
  z-index: 100;
  text-align: right;
  padding: 10px;
}
</style>
